<script setup>
import { ref } from "vue";

import {
  LogoPlaystation,
  PlayCircle,
  PauseCircle,
  PlaySkipBackCircle,
  PlaySkipForwardCircle,
  VolumeHigh,
  VolumeMuteSharp,
  Repeat,
  List,
} from "@vicons/ionicons5";
import { usePlayerStateStore } from "@/stores/playerState";
import { useNotifyStateStore } from "@/stores/notifyState";

const notification = useNotification();
var playerStore = usePlayerStateStore();
var notifyStore = useNotifyStateStore();

var isPlaying = ref(false);

function player_cb_err(err) {
  console.error("music play error!");
  isPlaying.value = false;
  //player_cb_end();
  notification.error({
    content: "播放失败: " + playerStore.curPlayMusic.title,
    meta: "" + playerStore.curPlayMusic.path,
    duration: 8000,
    keepAliveOnHover: true,
  });
}
function player_cb_end() {
  if (playerStore.curPlayerLoop) {
    playerStore.play_ctrl("play");
    return;
  }
  var inf = playerStore.get_next_prev("next");
  if (inf) {
    play_cur(inf);
  }
}

function player_cb_seek(pos) {
  if (playerStore.curPlayer) {
    // 设置当前播放进度
    // console.log("seek", pos);
    playerStore.curPlayerPos = pos;

    // 更新播放状态
    isPlaying.value = playerStore.isPlaying();
  }
}

function player_play() {
  if (playerStore.isPlaying()) {
    playerStore.play_ctrl("pause");
  } else {
    if (playerStore.curPlayer) {
      // 继续播放
      playerStore.play_ctrl("play");
    } else if (playerStore.curPlayMusic) {
      // 没有播放，然后启动新的播放
      playerStore.play_new(
        playerStore.curPlayMusic,
        player_cb_err,
        player_cb_end,
        player_cb_seek
      );
    }
  }
}
function player_next() {
  var inf = playerStore.get_next_prev("next");
  if (inf) {
    play_cur(inf);
  }
}
function player_prev() {
  var inf = playerStore.get_next_prev("prev");
  if (inf) {
    play_cur(inf);
  }
}
function player_volume_cb() {
  let vol = playerStore.curPlayerVolume;
  if (playerStore.curPlayer) playerStore.curPlayer.volume((vol * 1.0) / 100);
}

function play_cur(inf) {
  // playerStore.play_ctrl("stop");
  playerStore.curPlayerPos = 0;
  playerStore.curPlayMusic = inf;
  // console.log("play_cur", inf);
  playerStore.play_new(inf, player_cb_err, player_cb_end, player_cb_seek);
}

// 通知的处理
notifyStore.$subscribe((mutation, state) => {
  console.log("notifyStore", mutation.events.target);
  if (Object.is(mutation.events.target.value, notifyStore.player_ctrl)) {
    // console.log(notifyStore.player_ctrl);
    var val_obj = {
      ...notifyStore.player_ctrl.val
    };
    switch (notifyStore.player_ctrl.cmd) {
      case "play_to":
        play_cur(val_obj);
        break;
      case "add_to_playlist":
        playerStore.add_to_playlist(
          val_obj,
          false,
          null,
          null
        );
        break;
      case "add_to_favorite":
        playerStore.add_to_favorite(
          val_obj,
          false,
          null,
          null
        );
        break;
      case "remove_from_local":
        playerStore.remove_from_local(val_obj);
        break;
      case "remove_from_list":
        playerStore.remove_from_list(val_obj);
        break;
    }
  }
});

onUnmounted(() => {
  if( playerStore.curPlayer ){
    playerStore.curPlayer.destroy();
    playerStore.curPlayer = null;
  }
});
</script>

<template>
  <div>
    <n-progress type="line" :height="4" :percentage="playerStore.percentage" :show-indicator="false" processing />
    <!-- <n-slider v-model:value="percentage" :step="1" :max="100" :min="0" /> -->
  </div>
  <n-grid :cols="20">
    <n-gi :span="5" class="flex flex-row text-xs p-1 gap-2">
      <!-- <img :src="song_pic" alt="歌曲封面" class="w-4 h-4" /> -->
      <img :src="playerStore.curPlayMusic.cover" alt="歌曲封面" class="w-10 h-10 rounded" v-if="playerStore.curPlayMusic.cover" />
      <n-icon :size="42" v-else> <LogoPlaystation /> </n-icon>
      <div class="flex flex-col">
        <div class="flex flex-row justify-start items-center">
          <span class="pr-4 font-medium">{{
            playerStore.curPlayMusic.title
            }}</span>
          <span class="p-1 text-blue-600 bg-blue-100 text-xs">{{
            playerStore.curPlayMusic.artist
            }}</span>
        </div>
        <div class="text-gray-500">{{ playerStore.curPlayMusic.album }}</div>
      </div>
    </n-gi>
    <n-gi :span="10" class="flex flex-row justify-between items-center gap-1">
      <div class="flex-grow"></div>
      <n-button text title="上一首" @click="player_prev">
        <n-icon :size="32">
          <PlaySkipBackCircle />
        </n-icon>
      </n-button>
      <n-button text @click="player_play" :title="isPlaying ? '暂停' : '播放'">
        <n-icon :size="46">
          <PlayCircle v-if="!isPlaying" />
          <PauseCircle v-else />
        </n-icon>
      </n-button>
      <n-button text title="下一首" @click="player_next">
        <n-icon :size="32">
          <PlaySkipForwardCircle />
        </n-icon>
      </n-button>
      <div class="flex-grow"></div>
    </n-gi>
    <n-gi :span="5" class="flex flex-row justify-between items-center pr-2 gap-2">
      <div class="flex-grow"></div>
      <div class="text-xs font-mono">{{ playerStore.duration_show }}</div>
      <n-button text :title="playerStore.curPlayerLoop ? '单曲循环' : '列表循环'"
        @click="playerStore.curPlayerLoop = !playerStore.curPlayerLoop">
        <n-icon :size="20">
          <Repeat v-if="playerStore.curPlayerLoop" />
          <List v-else />
        </n-icon>
      </n-button>
      <n-popover trigger="click" placement="right" :flip="true" :overlap="true" style="width: 150px">
        <template #trigger>
          <n-button text title="音量">
            <n-icon :size="20">
              <VolumeHigh v-if="playerStore.curPlayerVolume > 0" />
              <VolumeMuteSharp v-else />
            </n-icon></n-button>
        </template>
        <template #footer>
          <n-slider v-model:value="playerStore.curPlayerVolume" :step="1" :max="100" :min="0"
            @on-dragend="player_volume_cb" />
        </template>
      </n-popover>
    </n-gi>
  </n-grid>
</template>

<style scoped></style>
